<template>
  <div class="deptTree">
    <div class="filter-input">
      <el-input placeholder="请输入关键字" v-model="filterText">
        <el-button slot="append" icon="el-icon-search" style="width: 30px; padding: 12px 12px"></el-button>
      </el-input>
    </div>
    <div class="treeDom">
      <el-tree class="myTree" :data="treeList" :props="defaultProps" node-key="id" :filter-node-method="filterNode"
        ref="deptTree" :expand-on-click-node="false" show-checkbox :default-expanded-keys="defaultActive"
        @check="handleNodeClick" @current-change="handleCurrentChange" :default-checked-keys="defaultActive"
        :check-strictly="false">
        <template #default="{ node, data }">
          <span style="display: flex;align-items: center;">
            <div class="node-icon">
              <svg-icon :icon-class="getNodeImg(data)" />
            </div>
            {{ node.label ?? data.title }}
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script>
import { useData } from "@/api/tree"
export default {
  name: "deptTree",
  props: {
    treeList: {
      type: Array,
      default: () => []
    },
  },
  setup() {
    const defaultProps = ref({
      children: 'children',
      label: 'shortName',
      isLeaf: 'hasChildren'
    });
    const filterText = ref('');
    const defaultActive = ref([]);
    const { treeNodeImg } = useData();

    return {
      defaultProps,
      filterText,
      defaultActive,
      treeNodeImg
    };
  },
  created() {

  },
  methods: {
    getNodeImg(data) {
      let imgHash = {
        0: "company",
        1: "department",
      }
      if (imgHash[data.type]) {
        return imgHash[data.type]
      }
    },
    //过滤树节点
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },
    handleNodeClick(data, checked) {
      let parent = this.$parent
      let flag = true;
      do {
        if (parent.deptTreeNodeClick) {
          parent.deptTreeNodeClick(checked.checkedKeys)
          flag = false;
        } else {
          parent = parent.$parent
        }
      } while (flag)
      // this.$emit("deptTreeNodeClick", checked.checkedKeys);
    },
    handleCurrentChange(data, node) {
      let parent = this.$parent
      let flag = true;
      do {
        if (parent.deptTreeNodeClick) {
          parent.deptTreeNodeClick([data.id])
          flag = false;
        } else {
          parent = parent.$parent
        }
      } while (flag)
      // this.$emit("deptTreeNodeClick", [data.id]);
    }
  },
  watch: {
    filterText(val) {
      this.$refs.deptTree.filter(val);
    },
    treeList: {
      handler(val) {
        this.defaultActive = val.map(v => { return v.id })
      },
      immediate: true,
      deep: true
    }
  },
};
</script>

<style lang="scss" scoped>
.deptTree {
  padding-top: 15px !important;
  height: 100%;

  :v-deep(.el-tree-node__content) {
    line-height: 26px;
  }

  .filter-input {
    height: 40px;
    width: 100%;
    overflow: hidden;

    :v-deep(.el-input) {
      height: 32px;

      .el-input__inner {
        height: 32px;
      }
    }
  }

  .treeDom {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    box-sizing: border-box;
  }

  .myTree {
    font-size: 14px;

    div {
      display: inline-block;
    }

    :deep(.el-tree-node) {
      min-width: -webkit-max-content;

      >.el-tree-node__children {
        overflow: visible;
      }
    }
  }
}
</style>
